import {atom, useAtom} from 'jotai';

interface state {
    text: string;
}

// Create your atoms and derivatives
const textAtom = atom<state>({text: 'demo'});
const uppercaseAtom = atom(
    (get) => get(textAtom).text
);

// Use them anywhere in your app
const Input = () => {
    const [state, setText] = useAtom(textAtom)
    const handleChange = (e: any) => setText((s) => {
        s.text = e.target.value;
        return {...s};
    })
    return (
        <input value={state.text} onChange={handleChange}/>
    )
};

const Uppercase = () => {
    const [uppercase] = useAtom(uppercaseAtom)
    console.log(uppercase)
    return (
        <div>Uppercase: {uppercase}</div>
    )
};

// Now you have the components
const JotaiDemo = () => {
    return (
        <>
            <Input/>
            <Uppercase/>
        </>
    )
}

export default JotaiDemo;